<template>
  <div>
    <h3>SubItem组件</h3>
    <p>已知库存数: {{ count }}</p>
    <button @click="del">库存-1</button>
  </div>
</template>

<script>
// 方式2：辅助函数来映射
// 1.从vuex包里导出辅助函数
import { mapState, mapMutations, mapActions } from "vuex"
// 2.调用辅助函数，传入要映射过来的state转态变量名
// let s=mapState(['count'])
// s是一个对象{count：内置函数}
// 打断点看函数里return什么值，发现state['count']
export default {
  // 3.把映射过来的对象，展开放入到computed里（结构是对应的）
  computed: {
    ...mapState(['count'])//数组里是字符串是规定，是你要传入过来的变量名
    // count内置函数
  },
  methods: {
    // 等价于原地有一个方法
    // subCount：function（）{}
    // asyncSubCount：function{}
    ...mapMutations(['subCount']),
    ...mapActions(['asyncSubCount']),
    // 减少库存
    del () {
      // this.subCount(1)//调用映射过来的mutations里subCount方法并传入
      // 1的值给mutations里形参value,用的是mutations
      this.asyncSubCount(1)
    }
  }
}
</script>